@use "variables";
:root{
  --el-text-color-regular: var($text-color);
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

// 字体
@font-face {
  font-family: "SourceHanSansSC-Bold";
  src: url(../assets/font/SourceHanSansSC-Bold-2.otf);
}
// 字体
@font-face {
  font-family: "YouSheBiaoTiHei";
  src: url(../assets/font/YouSheBiaoTiHei-2.ttf);
}
// 字体
@font-face {
  font-family: "SourceHanSansCN-Regular";
  src: url(../assets/font/SourceHanSansSC-Regular-2.otf);
}
// 字体
@font-face {
  font-family: "PangMenZhengDao";
  src: url(../assets/font/PangMenZhengDao-Regular.ttf);
}

// 字体
@font-face {
  font-family: "SourceHanSansCN-Medium";
  src: url(../assets/font/SourceHanSansSC-Medium-2.otf);
}

@font-face {
  font-family: "din-bold";
  src: url(../assets/font/din-bold-2.ttf);
}
@font-face {
  font-family: "din-medium";
  src: url(../assets/font/DIN-Medium-2.otf);
}

html,body {
  height: 100%;
  width: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: rgba(7,19,34);
}

#app {
  height: 100%;
  width: 100%;
  background: url('@/assets/icons/main-bg.png') center/100% 100% no-repeat;
  position: relative;

  .main-app {
    position: relative;
    width: 100%;
    height: 100%;
    color: $text-color;

    .main-app-top {
      width: 100%;
      height: 99px;
      line-height: 60px;
      font-weight: bold;
      text-align: center;
      font-size: 36px;
      font-family: YouSheBiaoTiHei;
      letter-spacing: 1px;
      background: url('@/assets/icons/main-top-bg.png') center/1885px 100% no-repeat;
      position: relative;

      span {
        text-shadow: 0 16px 18px rgba(151, 223, 255, 0.2);
        background: linear-gradient(0deg, #FFD0D0 0.3662109375%, #F7FDFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .main-app-ctn {
      height: calc(100% - 99px);
      display: flex;
      padding: 4px 20px 26px;
    }
  }

  .el-radio{
    color: #ffffff;
    font-size: 18px;
    font-style: SourceHanSansCN-Medium;
  }
}
.el-select__wrapper{
  background-color: transparent !important;
  height: 100%;
}
.el-select__wrapper,.el-input__wrapper{
  background: url("@/assets/icons/filter-bg.png") center/100% 100% no-repeat !important;
  box-shadow: none !important;
}
.el-select__caret,.el-select__placeholder.is-transparent,.el-input__prefix,.el-input__inner,.el-select__placeholder{
  color: #ffffff !important;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  display: none;
  width: 8px;
  height: 8px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
}

::-webkit-scrollbar-track-piece {
  background-color: #ffff;
  border-radius: 15px;
  -webkit-border-radius: 15px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 8px;
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 15px;
  -webkit-border-radius: 15px;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 8px;
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 15px;
  -webkit-border-radius: 15px;
}